<!-- 党员活动台账 -->
<template>
  <div class="eduction_index">
    <!-- 按钮 -->
    <div class="top">
      <div class="left" v-if="!isNoCommon">
        <el-button
          type="success"
          size="small"
          @click="addUpload"
          style="background: #26a661"
          icon="el-icon-plus"
          >新增</el-button
        >
        <el-button
          plain
          size="small"
          icon="el-icon-s-claim"
          @click="toDrafts"
          style="background: #67c23a !important"
          >草稿箱</el-button
        >
      </div>
      <div class="right">
        <div class="xuexi">
          <p>活动类型：</p>
          <el-select
            v-model="listParams.activityType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in typeArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </div>
        <div class="kejian">
          <p>活动状态：</p>
          <el-select
            v-model="listParams.activityStatus"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in Status"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </div>
        <el-button
          type="primary"
          size="small"
          @click="getList"
          icon="el-icon-search"
          >搜索</el-button
        >
        <el-button
          plain
          size="small"
          icon="el-icon-refresh"
          @click="resetList"
          style="background: #909399 !important"
          >重置</el-button
        >
      </div>
    </div>

    <AddOrUpdate
      :title="title"
      :isShowAdd="isShowAdd"
      @resetAdd="resetAdd"
      @addActivity="addActivity"
      @saveDraft="saveDraft"
    />
    <Table
      :listLoading="listLoading"
      :listArr="listArr"
      :PlaceListArr="PlaceListArr"
      @revocation="revocation"
    />

    <pagination
      v-show="total > 10"
      :total="total"
      :page.sync="listParams.pageNum"
      :limit.sync="listParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { uploadUrl2 } from "@/const";
import { getToken } from "@/utils/auth";


import AddOrUpdate from "./addOrUpdate.vue";
import Table from "./table.vue";

import {
  apiTbUserInfoList, // 参与人员
  apiAllEnumMap, // 活动类型
  apiLoginUserInfo, // 获取登录人身份信息
} from "@/api2/ledger";

import {
  getActivityListApi,
  createActivityApi,
  PlaceListApi,
  saveDraftsApi,
  revocationApi,
} from "@/api2/politicalActivity";

export default {
  components: {
    AddOrUpdate,
    Table,
  },
  data() {
    return {
      uploadUrl2,
      headers: {
        Authorization: getToken(),
        platform: "WEB",
      },
      // -----------------
      coverUrlPic: [], // 保存上传的图片
      accessoryUrlFile: [], // 保存上传的附件

      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      participantArr: [], // 参与人员
      urls: [],
      fileSize: 200, //上传文件大小
      fileAccept: "",
      srcList: [],
      whetherVideosArr: [], // 多个视频链接
      educationTypeArr: [],
      kejianTypeArr: [],
      formRules: {
        activityTheme: [
          {
            required: true,
            message: "请填写活动主题",
            trigger: "blur",
          },
        ],

        activityType: [
          {
            required: true,
            message: "请选择活动类型",
            trigger: "change",
          },
        ],
        activityStartTime: [
          {
            type: "date",
            required: true,
            message: "请选择开始时间",
            trigger: "change",
          },
        ],
        activityEndTime: [
          {
            type: "date",
            required: true,
            message: "请选择结束时间",
            trigger: "change",
          },
        ],
        activityPlace: [
          {
            required: true,
            message: "请选择活动地点",
            trigger: "change",
          },
        ],
        participant: [
          {
            required: true,
            message: "请选择参与人员",
            trigger: "change",
          },
        ],

        activityContent: [
          {
            required: true,
            message: "请输入活动内容",
            trigger: "blur",
          },
        ],
        accessoryUrl: [
          {
            required: true,
            message: "请选择文件",
            trigger: "change",
          },
        ],

        learningType: [
          { required: true, message: "请选择学习类型", trigger: "change" },
        ],

        url: [
          {
            required: true,
            message: "请输入链接地址",
            trigger: "blur",
          },
        ],
      },
      dialogForm: {
        seriesCoverUrl: [],
        fileUrl: [],
        coverUrl: [],
        accessoryUrl: [],
      },
      ruzhiApplyDialog: false,
      total: 0,
      listLoading: false,
      listArr: [],
      participant: [],
      // ---------------------
      isShowAdd: false,
      Status: [
        {
          key: null,
          value: "全部",
        },
        {
          value: "未开始",
          key: 1,
        },
        {
          value: "进行中",
          key: 2,
        },
        {
          value: "已结束",
          key: 3,
        },
      ],
      typeArr: [], // 活动类型
      title: "",
      isNoCommon: true, // 是普通人员
      listParams: {
        pageNum: 1,
        pageSize: 10,
        djDeptId: JSON.parse(sessionStorage.getItem("loginUserinfo")).djDeptId,
        activityStatus: null,
        activityType: null,
      },
      PlaceListArr: [],
    };
  },
  watch: {},
  created() {
    this.getPlaceList();
    setTimeout(() => {
      this.init();
    }, 300);
  },
  methods: {
    // 撤销未开始活动
    revocation(id) {
      revocationApi(id)
        .then((res) => {
          if (res.code === 0) {
            this.msgSuccess("撤销成功");
            this.getList();
          } else {
            this.msgError("撤销失败");
          }
        })
        .catch((err) => {
          this.msgError("撤销失败");
        });
    },

    // 获取活动地点
    getPlaceList() {
      PlaceListApi()
        .then((res) => {
          console.log(res);
          this.PlaceListArr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取人员身份信息
    getUserInfo() {
      let userInfo = sessionStorage.getItem("loginUserinfo");
      if (userInfo) {
        const INFO = JSON.parse(userInfo);
        if (INFO.permission && INFO.permission.indexOf("common") > -1) {
          this.isNoCommon = true;
        } else {
          this.isNoCommon = false;
        }
      }
    },
    // 打开草稿箱
    toDrafts() {
      this.$emit("change", "Drafts");
    },
    // 重置
    resetList() {
      this.listParams = {
        pageNum: 1,
        pageSize: 10,
        djDeptId: JSON.parse(sessionStorage.getItem("loginUserinfo")).djDeptId,
        activityStatus: null,
        activityType: null,
      };
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getActivityListApi(this.listParams)
        .then((res) => {
          console.log(res);
          if (res.code == 0 && res.data) {
            this.listArr = res.data;
            this.total = res.total;
          } else {
            this.listArr = [];
            this.total = 0;
          }
          this.listLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.listLoading = false;
          this.listArr = [];
          this.total = 0;
        });
    },
    // *****************************
    // 将标准按时间转为时间戳
    getTimeStamp(chinaStandardTime) {
      return new Date(chinaStandardTime).getTime();
    },

    // 获取登录人信息
    getLoginUserInfo() {
      apiLoginUserInfo()
        .then((res) => {
          if (res.code == 0) {
            let loginUserinfo = JSON.parse(
              sessionStorage.getItem("loginUserinfo")
            );
            sessionStorage.setItem(
              "loginUserinfo",
              JSON.stringify(loginUserinfo)
            );
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取活动类型
    getAllEnumMap() {
      apiAllEnumMap()
        .then((res) => {
          if (res.code == 0) {
            this.typeArr = res.data;
          } else {
            this.typeArr = [];
          }
        })
        .catch((err) => {
          this.typeArr = [];
        });
    },

    // 获取参与人员列表
    getTbUserInfoList() {
      apiTbUserInfoList({ djDeptId: this.listParams.djDeptId })
        .then((res) => {
          if (res.code == 0) {
            this.participantArr = res.data;
          } else {
            this.participantArr = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.participantArr = [];
        });
    },

    // 取消提交
    resetAdd() {
      this.isShowAdd = false;
    },

    // 保存到草稿
    saveDraft(data) {
      saveDraftsApi(data)
        .then((res) => {
          console.log(res);
          if (res.code === 0) {
            this.msgSuccess("提交成功");
            this.getList();
          } else {
            this.msgError("提交失败");
          }
          this.isShowAdd = false;
        })
        .catch((err) => {
          console.log(err);
          this.msgError("提交失败");
          this.isShowAdd = false;
        });
    },

    // 提交
    addActivity(data) {
      this.isShowAdd = true;
      createActivityApi(data)
        .then((res) => {
          console.log(res);
          if (res.code === 0) {
            this.msgSuccess("提交成功");
            this.getList();
          } else {
            this.msgError("提交失败");
          }
          this.isShowAdd = false;
        })
        .catch((err) => {
          console.log(err);
          this.msgError("提交失败");
          this.isShowAdd = false;
        });
    },

    // 新增
    addUpload() {
      this.getLoginUserInfo();
      this.isShowAdd = true;
      this.title = "新建党群活动";
      this.getTbUserInfoList();

      this.dialogForm.userName = JSON.parse(
        sessionStorage.getItem("loginUserinfo")
      ).name;

      this.dialogForm.userId = JSON.parse(
        sessionStorage.getItem("loginUserinfo")
      ).uid;
    },

    // 项目初始化
    init() {
      this.getUserInfo();
      this.getList();
      this.getAllEnumMap();
    },
  },
};
</script>

<style lang="scss" scoped>
.eduction_index {
  padding: 15px;
  .top {
    height: 35px;
    display: flex;
    justify-content: space-between;
    .right {
      display: flex;
      .xuexi,
      .kejian {
        margin: 0 20px;
        display: flex;
        p {
          line-height: 35px;
          width: 40%;
        }
      }
    }
  }
  .upload_url {
    display: flex;
    align-items: center;
    margin: 4px 0;
    .el-icon-circle-plus-outline,
    .el-icon-remove-outline {
      cursor: pointer;
      margin-left: 10px;
      font-size: 20px;
    }
    .el-icon-circle-plus-outline:hover {
      color: #409eff;
    }
    .el-icon-remove-outline:hover {
      color: #f56c6c;
    }
  }
}
</style>
